/*防止HTML文档在完全加载之前运行jQuery代码，
 一般会将所有的jQuery调用放到文档就绪函数中：
$(document).ready(function(){//script goes here})
or $(function(){// your script goes here})
*/
$(function () {
    // 找到所在标签id元素
    var $username = $('#username')
    var $password=$('#password')
    var $repeatedPassword=$('#repeatedPassword')
    var $valistr=$('#valistr')
    var $email=$('#email')
    var $submit=$('#myForm')

    // 定义开关变量
    var flag_username=false
    var flag_password=false
    var flag_repeatedPassword=false
    var flag_email=false
    var flag_valistr=false

    //给必要的框加上*号
    $("form :input.MustFill").each(function () {
        //通过jquery api：$("HTML字符串") 创建jquery对象
        var $onError = $("<span class='onError'>*</span>");
        //添加到this对象的父级对象下
        $(this).parent().append($onError);
    });

    //对姓名输入框实时监听
    $username.bind('input propertychange',function(){
        //1、判断用户名是否合理，符合正则表达式
        //2、在合理的条件下，与数据库连接，判断是否用户名已经存在
        // 获取用户输入的数据
        var name_text = $username.val()
        // 正则，正则验证用户输入的数据是否合法
        var valid_username = /^\w{3,10}$/

        if (name_text === '') {
            $('#inputName').show().html("用户名不能为空字符串");
            //设置显示的文本字样，并使框为红色
            document.getElementById("username").style.borderColor = "red";
            document.getElementById("inputName").setAttribute("class","error");
            flag_username=false
        }else if (valid_username.test(name_text)) {
            //在用户名合理的条件下，与数据库进行交互，判断是否存在于数据库中
            //获得input框dom对象
            var $inputName =$('#inputName');
            //与数据库连接，进行验证
            $.get("/account/findAccountByUsername",{"username":name_text},function(data,status,xhr){
                console.log("I'm coming");
                var responseInfo = xhr.responseText;
                console.log(responseInfo);
                //账号已存在
                if(responseInfo === "Exist"){
                    document.getElementById("username").style.borderColor = "red";
                    $inputName.show().html('账号已存在');
                    document.getElementById("inputName").setAttribute("class","error");
                    console.log(name_text + "账号已存在，不可以使用");
                    flag_username=false;
                }else if(responseInfo === "Not Exist"){
                    document.getElementById("username").style.borderColor = "green";
                    $inputName.show().html('账号可以使用      ');
                    document.getElementById("inputName").setAttribute("class","right");
                    console.log($inputName.className);
                    console.log(name_text + "账号不存在，可以使用");
                    flag_username=true;
                    console.log("username is true");
                }
            });
        } else {
            //设置显示的文本字样，并使框为红色
            document.getElementById("username").style.borderColor = "red";
            document.getElementById("inputName").setAttribute("class","error");
            $('#inputName').show().html("用户名是3-10位数字、字母！");
            flag_username=false
        }
    });

    //用于判断密码是否合法，非空，6-12个字符
    function passwordValid(){
        // 获取用户输入的数据
        var password_text = $password.val()
        // 正则，正则验证用户输入的数据是否合法
        var valid_password = /^\w{6,12}$/

        if (password_text === '') {
            $('#inputPassword').show().html("密码不能为空字符串");
            //设置显示的文本字样，并使框为红色
            document.getElementById("password").style.borderColor = "red";
            document.getElementById("inputPassword").setAttribute("class","error");
            flag_password=false
        }else if (valid_password.test(password_text)) {
            //设置显示的文本字样，并使框为绿色
            document.getElementById("password").style.borderColor = "green";
            document.getElementById("inputPassword").setAttribute("class","right");
            $('#inputPassword').show().html("密码合法      ");
            flag_password=true
            console.log("password is true");
        } else {
            //设置显示的文本字样，并使框为红色
            document.getElementById("password").style.borderColor = "red";
            document.getElementById("inputPassword").setAttribute("class","error");
            $('#inputPassword').show().html("密码是6-12位数字、字母！");
            flag_password=false
        }
    }

    //对密码输入框实时监听
    $password.bind('input propertychange',function(){
        passwordValid();
    });

    //判断两次输入的密码是否一致
    function CheckRepeatedPassword(){
        // 获取重复密码框输入的数据
        var first_password_text=$password.val()
        var second_password_text=$repeatedPassword.val()
        if(second_password_text===''){
            //设置显示的文本字样，并使框为红色
            document.getElementById("repeatedPassword").style.borderColor = "red";
            document.getElementById("inputRepeatPassword").setAttribute("class","error");
            $('#inputRepeatPassword').show().html("请确认密码！");
            flag_repeatedPassword=false
        }
        else if(!flag_password){
            //设置显示的文本字样，并使框为红色
            document.getElementById("repeatedPassword").style.borderColor = "red";
            document.getElementById("inputRepeatPassword").setAttribute("class","error");
            $('#inputRepeatPassword').show().html("新密码有误！");
            flag_repeatedPassword=false
        }
        else if (first_password_text==second_password_text){
            console.log('Im going to check');
            //设置显示的文本字样，并使框为绿色
            document.getElementById("repeatedPassword").style.borderColor = "green";
            document.getElementById("inputRepeatPassword").setAttribute("class","right");
            $('#inputRepeatPassword').show().html("密码合法");
            flag_repeatedPassword=true
            console.log("repeatPassword code is true");
        }
        else{
            //设置显示的文本字样，并使框为红色
            document.getElementById("repeatedPassword").style.borderColor = "red";
            document.getElementById("inputRepeatPassword").setAttribute("class","error");
            $('#inputRepeatPassword').show().html("两次密码输入不一致，请重新输入");
            flag_repeatedPassword=false
        }
    }

    // 判断两次输入的密码是否一致
    $repeatedPassword.bind('input propertychange',function(){
        CheckRepeatedPassword();
    });

    //移动到验证码区域，变成小手
    $('#valiImage').mouseover(function () {
        console.log("我要变成小手");
        $('#valiImage').css("cursor","hand");
    });

    //点击验证码，更改图片
    $('#valiImage').on('click',function () {
        console.log("我要换图片")
        var date = new Date();
        document.getElementById("valiImage").setAttribute("src","/account/creatValidString?temp="+date);
        testValid();
    });

    function testValid(){
        //获得用户输入的数据
        var valid_text = $valistr.val();
        console.log("瞧瞧你输入的数据" + valid_text);
        //与数据库匹配
        if (valid_text === '') {
            console.log("你看你输个空字符");
            //设置显示的文本字样，并使框为红色
            document.getElementById("valistr").style.borderColor = "red";
            flag_valistr=false
        }else {
            console.log("Im going to connect my database");
            //与数据库进行交互，判断验证码是否正确
            //与数据库连接，进行验证
            $.get("/account/judgeValidString",{"valistr":valid_text},function(data,status,xhr){
                var responseInfo = xhr.responseText;
                console.log(responseInfo);
                //验证码正确
                if(responseInfo === "Right"){
                    //设置显示的文本字样，并使框为绿色
                    document.getElementById("valistr").style.borderColor = "green";
                    console.log(valid_text + "验证码正确");
                    flag_valistr=true;
                    console.log("valid code is true");
                }else if(responseInfo === "Wrong"){
                    //验证码错误
                    //设置显示的文本字样，并使框为红色
                    document.getElementById("valistr").style.borderColor = "red";
                    console.log(valid_text + "验证码不正确");
                    flag_valistr=false;
                }
            });
        }
    }

    //验证码输入框
    $valistr.bind('input propertychange',function(){
        testValid();
    });


    //判断邮箱是否合理
    $email.bind('input propertychange',function(){
        var email_text = $email.val();
        // 邮箱正则匹配表达式
        var valid_email = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
        // 如果输入框为空，则提示不能为空并return
        if (email_text===''){
            $('#inputEmail').show().html("邮箱不能为空字符串");
            //设置显示的文本字样，并使框为红色
            document.getElementById("email").style.borderColor = "red";
            document.getElementById("inputEmail").setAttribute("class","error");
            flag_email=false

        }else if (valid_email.test(email_text)) {
            //设置显示的文本字样，并使框为绿色
            document.getElementById("email").style.borderColor = "green";
            document.getElementById("inputEmail").setAttribute("class","right");
            $('#inputEmail').show().html("邮箱合法       ");
            flag_email=true
            console.log("email is true");
        }else {
            //设置显示的文本字样，并使框为红色
            document.getElementById("email").style.borderColor = "red";
            document.getElementById("inputEmail").setAttribute("class","error");
            $('#inputEmail').show().html("请输入合法邮箱  ");
            flag_email=false
        }
    });

    // 6.所有输入框验证通过再提交注册
    $submit.submit(function(){
        if(flag_username && flag_password && flag_repeatedPassword && flag_valistr && flag_email){
            alert('OK!')
        }
        else{
            alert("Not OK!")
            return false
        }
    })
})